<template>
    <p>学生成绩管理系统</p>
        <div class="demo-login">
            <Login @on-submit="handleSubmit">
                <UserName name="username" />
                <Password name="password" />
                <div class="demo-auto-login">
                    <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
                    <a>忘记密码</a>
                </div>
                <router-link to="home"><Submit /></router-link>
            </Login>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    autoLogin: true
                }
            },
        }
    </script>
    <style>
        .demo-login{
           display: flex;
             justify-content: center;
            align-items: center;
            height: 100dvh;
            /*设置高度为视口高度*/
            background-image: url("denglu.jpg");
            /*替换为实际路径*/
            background-size: cover;
            /*图片覆盖整个容器*/
            background-position: center;
            /*图片居中*/
            background-repeat: no-repeat;
            /*不重复背景图片*/
        }
        .demo-auto-login{
            margin-bottom: 30px;
            margin-top: 20px;
            text-align: left;
        }
        .demo-auto-login a{
             float: right;
        }
        p{
          font-size: 30px;
          font-family: '宋体';
          font-weight: bolder;
          color: black;
          text-align: center;
          margin-top: 30px;
          margin-bottom: 90px;
        }
    </style>
    